/**  game.js  */

!function () {
    function setAttr(el, props) {
        if (el) {
            for (const k in props) {
                const val = props[k];
                el.style[k] = val;
            }
        }
    }
    var $ = function (el) {
        let $el = null;
        if (el) {
            $el = document.querySelector(el);
        }
        return $el;
    }
    function drawImage(src, ctx, x = 0, y = 0, w = 0, h = 0, is_close = true) {
        ctx.beginPath();
        ctx.drawImage(src, x, y, w, h, 0, 0, w, h);
        if (is_close) {
            ctx.fill();
            ctx.closePath();
        }
        return ctx;
    }
    function animate() {
        setInterval(() => {

        }, 20);
    }

    window.onload = function () {
        let conf = {
            screen: {
                width: this.innerWidth * this.devicePixelRatio,
                height: this.innerHeight * this.devicePixelRatio
            }
        }
        const canvas = $("#canvas");
        canvas.width = conf.screen.width;
        canvas.height = conf.screen.height
        const context = canvas.getContext("2d");
        let img = new Image();
        img.src = "img/bg.png";

        img.onload = () => {
            let img_width = img.width;
            let img_height = img.height;
            let center_x = (canvas.width) / 1;
            let center_y = (canvas.width) / 2;
            const back = drawImage(img, context, -100, 0, img_width, img_height, true);
            let _x = 0;
            function move(end){
                _x+=0.4;
                back.clearRect(0, 0, 1024, 1024);
                back.translate(_x, 0);
                drawImage(img, context, -100, 0, img_width, img_height, true);
                if (_x >= end) {
                    console.log("end");
                    return;
                }
                window.requestAnimationFrame(move);
            }
            move(1);
            // back.translate(510, 150);
            // back.fillRect(0, 0, 100, 100);
            // back.fillStyle = "red";
        };
    }
}();